<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
    <meta name="viewport"
          content="width=device-width, initial-scale=1,minimum-scale=1, maximum-scale=1, user-scalable=no">

    <title>Title</title>
    <style>

        * {
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }

        ul, li {
            list-style: none;
        }

        .hide {
            display: none;
        }

        .swiper-container {
            width: 800px;
            height: 300px;
            margin: 20px auto;
            position: relative;
            overflow: hidden;
        }

        .banner {
            width: 800px;
            height: 300px;
            margin: 20px auto;
            position: relative;
            overflow: hidden;
        }

        .swiper-wrapper {
            width: auto;
            height: 300px;
            position: absolute;
            left: 0;
            top: 0;
        }

        .imgbox {
            width: auto;
            height: 300px;
            position: absolute;
            left: 0;
            top: 0;
        }

        .swiper-wrapper .swiper-slide {
            float: left;
        }

        .imgbox li {
            float: left;
        }

        .swiper-wrapper .swiper-slide >img {
            width: 800px;
            height: 300px;
        }

        .imgbox li img {
            width: 800px;
            height: 300px;
        }

        .pagebtn {
            width: 100%;
            height: 50px;
            position: absolute;
            top: 50%;
            left: 0;
            margin-top: -25px;
        }

        .pagebtn > div {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background-color: rgba(255, 255, 255, .5);
            color: #fff;
            text-align: center;
            line-height: 50px;
            font-size: 30px;
            cursor: pointer;
        }

        .pagebtn p {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background-color: rgba(255, 255, 255, .5);
            color: #fff;
            text-align: center;
            line-height: 50px;
            font-size: 30px;
            cursor: pointer;
        }

        .pagebtn .swiper-button-prev {
            float: left;
        }

        .pagebtn p.prev {
            float: left;
        }

        .pagebtn .swiper-button-next {
            float: right;
        }

        .pagebtn p.next {
            float: right;
        }

        .imgNav {
            position: absolute;
            left: 10px;
            bottom: 10px;
            width: 100%;
            height: 60px;
        }

        .nav {
            height: 80px;
        }

        .nav li {
            float: left;
            margin-right: 10px;
            cursor: pointer;
        }

        ul.nav li.active {
            border: 1px solid #fff;
        }

        .nav li img {
            width: 60px;
            height: 60px;
            display: block;
        }
    </style>
</head>
<body>
<!--公司历程-->
<div class="course">
    <div class="fengge2">
        <div class="fn2"></div>
        <div class="font2">公司历程</div>
        <div class="fn2 "></div>
    </div>
    <!--轮播部分-->
    <div class="swiper-container " id="banner1">
        <div class="swiper-wrapper banner1-w" id="gslcId">
            <div class="swiper-slide ">
                <img src="img/1.jpg" alt="" >
                <p class="show">餐宴历程</p>
            </div>
            <div class="swiper-slide ">
                <img src="img/2.jpg" alt="" >
                <p class="show">测试1</p>
            </div>
            <div class="swiper-slide">
                <img src="img/3.jpg" alt="" >
                <p class="show">五年八城 </p>
            </div>
            <div class="swiper-slide ">
                <img src="img/4.jpg" alt="">
                <p class="show">公司历程1</p>
            </div>

        </div>
        <!--分页器-->
        <div class="pagebtn">
            <div class="swiper-button-prev"></div>
            <div class="swiper-button-next"></div>
        </div>
    </div>
</div>
<div class="banner" id="banner">
    <ul class="imgbox">
        <li><img src="img/1.jpg" alt=""></li>
        <li><img src="img/2.jpg" alt=""></li>
        <li><img src="img/3.jpg" alt=""></li>
        <li><img src="img/4.jpg" alt=""></li>
    </ul>
    <div class="pagebtn hide">
        <p class="prev"><</p>
        <p class="next">></p>
    </div>
    <div class="imgNav">
        <ul class="nav"></ul>
    </div>
</div>
</body>
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<script>
    ;(function ($, window, document, undefined) {

        /*****定义Banner的构造函数******/
            //将变量定义到对象的属性上，函数变成对象的方法，使用时通过对象获取
        var Banner = function (ele, opt) {
                this.$element = ele;
                this.defaults = {
                    "auto": true,       //是否自动播放
                    "imgboxCls": "imgbox",      //图片列表class
                    "pagebtnCls": "pagebtn",    //左右点击按钮wrap class
                    "prevCls": "prev",  //上一页btn class
                    "nextCls": "next",  //下一页btn class
                    "navCls": "nav",        //缩略图导航  class
                    "actCls": "active", //当前图片状态
                    "hideCls": "hidden",        //隐藏 class
                    "isNav": true   //是否开启小图导航栏
                };
                this.options = $.extend({}, this.defaults, opt);

                /*****定义全局变量******/
                var _ = this,
                    $imgbox = this.$element.find("." + this.options.imgboxCls),  //图片列表wrap
                    imgLength = $imgbox.find("img").length,   //图片张数
                    imgWidth = this.$element.width(),  //图片宽度
                    imgBoxWidth = imgLength * imgWidth,   //图片列表总长度
                    $navBox = this.$element.find("." + this.options.navCls), //图片导航wrap
                    actCls = this.options.actCls,       //当前图片状态
                    navIndex = 0,   //当前索引
                    slideTarget = 0,    //轮播目标值
                    timer = null;   //定时器

                /***** 定义Banner私有方法******/
                // 自动播放
                this.auto = function () {
                    if (_.options.auto == "undefined" && _.options.auto == false) {
                        return false;
                    }
                    clearInterval(timer);
                    timer = setInterval(function () {
                        _.next();
                    }, 3000);
                };
                // 暂停播放
                this.stop = function () {
                    clearInterval(timer);
                };
                // 设置navIndex slideTarget
                this.setPostion = function (index, target) {
                    $navBox.find("li").removeClass(actCls).eq(index).addClass(actCls);
                    $imgbox.animate({"left": target});
                };
                // 下一页
                this.next = function () {
                    navIndex++;
                    var isFir = $imgbox.children(":first").attr("data-clone");
                    if (!!isFir) {
                        $imgbox.children(":first").remove();
                    }
                    if (navIndex == 1) {
                        if (slideTarget < 0) {
                            $imgbox.children(":last").remove();
                            $imgbox.width(imgBoxWidth);
                            $imgbox.css({"left": 0});
                            slideTarget = 0;
                        }
                    } else if (navIndex == imgLength) {
                        navIndex = 0;
                        var $firstClone = $imgbox.children(":first").clone();
                        $firstClone.attr("data-clone", "last");
                        $imgbox.append($firstClone);
                        $imgbox.width(function () {
                            return imgBoxWidth + imgWidth;
                        });
                        if (!!isFir) {
                            $imgbox.css({"left": imgWidth - imgBoxWidth});
                            slideTarget = imgWidth - imgBoxWidth;
                        }
                    }
                    slideTarget -= imgWidth;
                    _.setPostion(navIndex, slideTarget);
                };
                // 上一页
                this.prev = function () {
                    navIndex--;
                    var isLast = $imgbox.children(":last").attr("data-clone");
                    if (!!isLast) {
                        $imgbox.children(":last").remove();
                    }
                    if (navIndex == -1) {
                        navIndex = imgLength - 1;
                        var $lastClone = $imgbox.children(":last").clone();
                        $lastClone.attr("data-clone", "first");
                        $imgbox.children(":first").before($lastClone);
                        $imgbox.width(function () {
                            return imgBoxWidth + imgWidth;
                        });
                        $imgbox.css({"left": -imgWidth + "px"});
                        slideTarget = -imgWidth;
                    } else if (navIndex == imgLength - 2) {
                        if (slideTarget == 0) {
                            $imgbox.children(":first").remove();
                            $imgbox.width(imgBoxWidth);
                            $imgbox.css({"left": (imgWidth - imgBoxWidth) + "px"});
                            slideTarget = imgWidth - imgBoxWidth;
                        }
                    }
                    slideTarget += imgWidth;
                    _.setPostion(navIndex, slideTarget);
                };
                // 定位图片 小图导航
                this.position = function (index) {
                    if (index == navIndex) return false;
                    if (index == 0 && navIndex == imgLength - 1) {
                        _.next();
                        return;
                    }
                    if (index == imgLength - 1 && navIndex == 0) {
                        _.prev();
                        return;
                    }
                    var isFir = !!$imgbox.children(":first").attr("data-clone");
                    var isLast = !!$imgbox.children(":last").attr("data-clone");
                    if (isFir) {
                        $imgbox.width(imgBoxWidth);
                        $imgbox.children(":first").remove();
                        $imgbox.css("left", (imgWidth - imgBoxWidth) + "px");
                        slideTarget = imgWidth - imgBoxWidth;
                    }
                    if (isLast) {
                        $imgbox.width(imgBoxWidth);
                        $imgbox.children(":last").remove();
                        $imgbox.css("left", 0);
                        slideTarget = 0;
                    }
                    navIndex = index;
                    slideTarget = -imgWidth * index;
                    _.setPostion(index, slideTarget);
                }
            }

        /*****定义Banner对象的方法******/
        Banner.prototype = {
            // 调用Banner私有方法 处理DOM
            init: function () {
                var _ = this,
                    $prev = _.$element.find("." + _.options.prevCls),       //上一页按钮
                    $next = _.$element.find("." + _.options.nextCls),       //下一页按钮
                    $nav = _.$element.find("." + _.options.navCls),        //图片导航wrap
                    $imgbox = _.$element.find("." + _.options.imgboxCls), //imgbox wrap
                    $pagebtn = _.$element.find("." + _.options.pagebtnCls), //pagebtn wrap
                    navCls = _.options.actCls,  //图片导航wrap class
                    imgLength = $imgbox.find("img").length;    //图片张数
                imgWidth = _.$element.width(), //图片宽度
                    $img = $imgbox.find("img");   //轮播图片集合
                isNavImg = !!_.options.isNav;   //是否开启小图导航
                // 设置图片框width
                $imgbox.width(imgLength * imgWidth);
                _.auto();
                // 是否开启小图导航点击
                if (isNavImg) {
                    // 填充小图导航图片
                    $.each($img, function (v, obj) {
                        var _self = $(this);
                        var $liObj = v == 0 ? $('<li class="' + navCls + '"><img src="' + _self.attr("src") + '"></li>') : $('<li><img src="' + _self.attr("src") + '"></li>');
                        $nav.append($liObj);
                    });
                } else {
                    $nav.addClass(_.options.hideCls);
                }
                // hover
                _.$element.hover(function () {
                    $pagebtn.removeClass(_.options.hideCls);
                    _.stop();
                }, function () {
                    $pagebtn.addClass(_.options.hideCls);
                    _.auto();
                });
                //点击定时仿重复点击
                var _timer = {};
                function delay_till_last(id, fn, wait) {
                    if (_timer[id]) {
                        window.clearTimeout(_timer[id]);
                        delete _timer[id];
                    }
                    return _timer[id] = window.setTimeout(function() {
                        fn();
                        delete _timer[id];
                    }, wait);
                }
                // 上一页
                var flag=true;
                $prev.click(function () {
                    if(flag==true){
                        delay_till_last('id', function() {//注意 id 是唯一的
                            _.prev(); //响应事件
                            flag=false;
                            setTimeout(function(){
                                flag=true;
                            },300)
                        }, 100);
                    }
                });
                // 下一页
                $next.click(function () {
                    if(flag==true){
                        delay_till_last('id', function() {//注意 id 是唯一的
                            _.next();//响应事件
                            flag=false;
                            setTimeout(function(){
                                flag=true;
                            },300)
                        }, 100);
                    }
                });
                // 小图导航点击
                $nav.on("click", "li", function () {
                    var _self = $(this);
                    _.position(_self.index());
                });
            }
        }
        /*****定义插件banner，在插件中使用Banner对象******/
        $.fn.banner = function (opt) {
            // 创建Banner实体
            var ban = new Banner(this, opt);
            // 调用Banner初始化方法
            return ban.init();
        }
    })(jQuery, window, document);
</script>
<script>
    var _timer = {};
    function delay_till_last(id, fn, wait) {
        if (_timer[id]) {
            window.clearTimeout(_timer[id]);
            delete _timer[id];
        }
        return _timer[id] = window.setTimeout(function() {
            fn();
            delete _timer[id];
        }, wait);
    }
  /*  $dom.on('click', function() {
        delay_till_last('id', function() {//注意 id 是唯一的
            //响应事件
        }, 100);
    });*/
    $("#banner").banner({
        "auto": true,       //是否自动播放
        "imgboxCls": "imgbox",      //图片列表class
        "pagebtnCls": "pagebtn",    //左右点击按钮wrap class
        "prevCls": "prev",  //上一页btn class
        "nextCls": "next",  //下一页btn class
        "navCls": "nav",        //缩略图导航  class
        "actCls": "active", //当前图片状态
        "hideCls": "hide",      //隐藏 class
        "isNav": true   //是否开启小图导航栏
    });
    $(".swiper-container").banner({
        "auto": true,       //是否自动播放
        "imgboxCls": "swiper-wrapper",      //图片列表class
        "pagebtnCls": "pagebtn",    //左右点击按钮wrap class
        "prevCls": "swiper-button-prev",  //上一页btn class
        "nextCls": "swiper-button-next",  //下一页btn class
                //缩略图导航  class
        "actCls": "active", //当前图片状态
        "hideCls": "hide",      //隐藏 class
          //是否开启小图导航栏
    });


</script>
</html>